<template>
	<view class="expert-page">
		<u-navbar title="接单详情" :autoBack="true" :placeholder="true" bgColor="rgba(255,255,255,0)"></u-navbar>
		<view class="line"></view>
		<view class="content">
			<view class="info-box">
				<view class="head-top">
					<view class="head" v-if="info.user_avatar">
						<image :src="'https://m.lqvvvv.com'+info.user_avatar" mode=""></image>
					</view>
					<view class="head-right">
						<view class="name">
							{{info.user_nickname}}
						</view>
						<view class="figure">
							<view class="weight"
								:style="info.user_gender == 2?'background:rgba(239, 140, 255, 0.27);color:#FF6DE8':'background:rgba(139, 139, 255, 0.27);color:#23a7ff'">
								{{info.user_height}}cm/{{info.user_weight}}kg
							</view>
							<view class="age"
								:style="info.user_gender == 2?'background-color:#FFE0EC;color:#F24789':'background-color:#cfe0ff;color:#23a7ff'">
								<image v-if="info.user_gender == 2"
									src="https://m.lqvvvv.com/assets/static/index/female0.png" mode="">
								</image>
								<image v-else src="https://m.lqvvvv.com/assets/static/index/maleb.png" mode=""></image>
								<view>
									{{info.user_age}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="pre">
					<view class="pre-title">
						下单时间
					</view>
					<view class="pre-time">
						{{$u.timeFormat(info.createtime, 'yyyy-mm-dd hh:MM:ss')}}
					</view>
				</view>
				<view class="info-item">
					<view class="item-title">
						订单号
					</view>
					<view class="item-text" v-if="info.subject">
						{{info.orderid}}
					</view>
				</view>
				<view class="info-item">
					<view class="item-title">
						探店主题
					</view>
					<view class="item-text" v-if="info.subject">
						{{info.subject.title}}
					</view>
				</view>
				<view class="info-item">
					<view class="item-title">
						预见地点
					</view>
					<view class="item-text">
						{{info.address}}
					</view>
					<view class="btn">
						<u-button text="导航" @click="goopen" color="#5755F2" shape="circle" size="mini"></u-button>
					</view>
				</view>
				<view class="info-item">
					<view class="item-title">
						预定时间
					</view>
					<view class="item-text">
						{{$u.timeFormat(info.start_time, 'yyyy-mm-dd hh:MM:ss')}}
					</view>
				</view>
				<view class="info-item">
					<view class="item-title">
						来回路费
					</view>
					<view class="item-text">
						{{info.distance_money}} 币
					</view>
				</view>
			</view>
			<view class="agreement">
				<u-checkbox-group>
					<u-checkbox :checked="true" disabled size="16" active-color="#5755F2" shape="circle"></u-checkbox>
				</u-checkbox-group>
				<view class="agreement-text">
					已签订<text @click="goagreement('rental_agreement')">《探店协议》</text>
				</view>
			</view>
			<view class="tips">
				为保障你和租友的安全,到达预见地点请根据提示进行人脸识别操作.请勿私下交易.平台租友有保障
			</view>
			<view style="height: 200rpx;"></view>
			<view class="btn-box">
				<view class="confirm" v-if="info.accept_status == 0 && info.status == 'paid'" @click="gojd()">
					操作
				</view>
				<view class="confirm" v-if="info.accept_status == 2 && info.status == 'cancelled'">
					您已拒绝
				</view>
				<view class="confirm" v-if="info.accept_status == 0 && info.status == 'cancelled'">
					对方已取消
				</view>
				<view class="confirm" v-if="info.travel_status == 0 && info.accept_status == 1" @click="gogogo">
					开始出发
				</view>
				<view v-if="info.travel_status == 1">
					<view class="confirm" v-if="info.accept_status == 1  &&info.f_face_status==0" @click="goquer()">
						确定到达
					</view>
					<view class="confirm"
						v-if="info.accept_status == 1 &&info.u_face_status==0 && info.f_face_status == 1">
						等待对方确定
					</view>
					<view class="confirm"
						v-if="info.accept_status == 1  &&info.u_face_status==1 && info.f_face_status == 1"
						@click="$navTo.togo('/pages/my/order/order-start',{id:id})">
						查看详情
					</view>
				</view>
				<!-- <image src="https://m.lqvvvv.com/assets/static/my/chat.png" mode=""></image> -->
				<image src="https://m.lqvvvv.com/assets/static/my/phone.png" @click="gophone(info.user_mobile)" mode="">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: true,
				id: '',
				info: {}
			}
		},
		onLoad(e) {
			console.log(e.id)
			this.id = e.id
			this.postdetails()
		},
		methods: {
			goopen() {
				let app = this
				uni.openLocation({
					latitude: Number(app.info.lat), // 目的地的纬度
					longitude: Number(app.info.lng), // 目的地的经度
					scale: 18, // 地图的缩放级别
					address: app.info.address, // 目的地的地址
					success: function() {
						console.log('成功打开地图导航');
					},
					fail: function(err) {
						console.error('打开地图导航失败', err);
					}
				});
			},
			gogogo() {
				let app = this
				uni.showModal({
					title: '提示',
					content: '是否已经出发！',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showLoading({
								mask: true
							})
							let params = {
								orderid: app.info.orderid,
								travel_status: 1
							}
							app.$Request({
								method: 'POST',
								url: '/api/friend_order/updateTravelStatus',
								data: params,
								ismsg: true,
							}).then(res => {
								uni.hideLoading()
								console.log(res)
								if (res.code == 1) {
									app.postdetails()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			goend() {
				uni.showLoading({
					mask: true
				})
				let params = {
					orderid: this.id,
					// #ifdef APP
					method: 'app',
					// #endif
					// #ifdef H5
					method: 'web',
					// #endif
					// #ifdef MP-WEIXIN
					method: 'miniapp',
					// #endif
					paytype: this.info.paytype
				}
				this.$Request({
					method: 'POST',
					url: '/api/friend_order/payResidue',
					data: params,
					ismsg: true,
				}).then(res => {
					console.log(res)
					uni.hideLoading()
					if (res.code == 1) {
						this.postdetails()
					}
				})
			},
			goquer() {
				let app = this
				uni.showModal({
					title: '提示',
					content: '是否已经到达约定地点！',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showLoading({
								mask: true
							})
							let params = {
								orderid: app.info.orderid,
							}
							app.$Request({
								method: 'POST',
								url: '/api/friend_order/reachPlace',
								data: params,
								ismsg: true,
							}).then(res => {
								uni.hideLoading()
								console.log(res)
								if (res.code == 1) {
									app.postdetails()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			gonojd() {
				let app = this
				uni.showModal({
					title: '提示',
					content: '是否拒绝此订单！',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showLoading({
								mask: true
							})
							let params = {
								orderid: app.info.orderid,
								accept_status: 2
							}
							app.$Request({
								method: 'POST',
								url: '/api/friend_order/friendOperateOrder',
								data: params,
								ismsg: true,
							}).then(res => {
								uni.hideLoading()
								if (res.code == 1) {
									app.postdetails()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			gojd() {
				let app = this
				uni.showModal({
					title: '提示',
					content: '是否接取此订单！',
					cancelText: '拒绝接单',
					confirmText: '确定接单',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showLoading({
								mask: true
							})
							let params = {
								orderid: app.info.orderid,
								accept_status: 1
							}
							app.$Request({
								method: 'POST',
								url: '/api/friend_order/friendOperateOrder',
								data: params,
								ismsg: true,
							}).then(res => {
								uni.hideLoading()
								if (res.code == 1) {
									app.postdetails()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
							uni.showLoading({
								mask: true
							})
							let params = {
								orderid: app.info.orderid,
								accept_status: 2
							}
							app.$Request({
								method: 'POST',
								url: '/api/friend_order/friendOperateOrder',
								data: params,
								ismsg: true,
							}).then(res => {
								uni.hideLoading()
								if (res.code == 1) {
									app.postdetails()
								}
							})
						}
					}
				});
			},
			gophone(tel) {
				console.log(tel)
				uni.makePhoneCall({
					phoneNumber: tel //仅为示例
				});
			},
			goagreement(name) {
				this.$navTo.togo('/pages/my/agreement/index', {
					name: name
				})
			},
			postdetails() {
				let params = {
					orderid: this.id,
				}
				this.$Request({
					method: 'POST',
					url: '/api/friend_order/getDetail',
					data: params,
					ismsg: false,
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.info = res.data
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F7F8FC;
	}
</style>
<style lang="scss" scoped>
	.expert-page {
		min-height: 100vh;
		background-image: url('https://m.lqvvvv.com/assets/static/index/nav-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 800rpx;

		.line {
			margin: 40rpx 20rpx 0;
			background-color: #6D8EFA;
			height: 31rpx;
			border-radius: 20rpx;
		}

		.content {
			padding: 0 30rpx;

			.info-box {
				border-top: 11rpx solid #1235AA;
				background-color: #fff;
				border-radius: 30rpx;
				border-top-right-radius: 10rpx;
				border-top-left-radius: 10rpx;
				margin-top: -20rpx;
				padding: 30rpx 30rpx 40rpx;

				.head-top {
					width: 190rpx;
					height: 190rpx;
					border-radius: 50%;
					border: 4rpx solid #fff;
					box-shadow: 0rpx 10rpx 14rpx 1rpx rgba(30, 120, 255, 0.24);
					display: flex;

					.head {
						margin-right: 40rpx;

						image {
							width: 180rpx;
							height: 180rpx;
							border-radius: 50%;
						}
					}

					.head-right {
						margin-top: 30rpx;

						.name {
							font-size: 36rpx;
							color: #19394A;
						}

						.figure {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							margin-top: 20rpx;

							.weight {
								padding: 8rpx 12rpx;
								border-radius: 10rpx;
								margin-right: 20rpx;
							}

							.age {
								display: flex;
								align-items: center;
								padding: 5rpx 20rpx;
								border-radius: 30rpx;

								image {
									width: 20rpx;
									height: 20rpx;
									margin-right: 5rpx;
								}
							}
						}
					}
				}

				.pre {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #000;
					margin-top: 60rpx;

					.pre-title {
						font-size: 32rpx;
					}

					.pre-time {
						font-size: 24rpx;
					}
				}

				.info-item {
					font-size: 28rpx;
					display: flex;
					align-items: center;
					margin-top: 60rpx;
					position: relative;

					.btn {
						position: absolute;
						top: 0;
						right: 0;
					}

					image {
						width: 32rpx;
						height: 32rpx;
					}

					.item-title {
						width: 25%;
						color: #999;
						padding: 0 20rpx;
					}

					.item-text {
						width: 60%;
						color: #19394A;
						margin-left: 10rpx;
					}
				}
			}

			.agreement {
				display: flex;
				align-items: center;
				padding: 30rpx 0;

				.agreement-text {
					color: #8B8DA0;
					font-size: 24rpx;

					text {
						color: #5755F2;
					}
				}
			}

			.tips {
				color: #E17741;
				font-size: 24rpx;
				padding: 20rpx 30rpx;
				border-radius: 10rpx;
				margin-top: 10rpx;
				background-color: #FFFDE7;
			}

			.btn-box {
				display: flex;
				justify-content: space-around;
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				padding: 30rpx;

				.confirm {
					width: 316rpx;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					background-image: url('https://m.lqvvvv.com/assets/static/my/confirm.png');
					background-repeat: no-repeat;
					background-size: 100% 88rpx;
					color: #fff;
					font-size: 28rpx;
					font-weight: bold;
				}

				image {
					width: 163rpx;
					height: 88rpx;
				}
			}

		}
	}
</style>